<template>
  <div class="data-view-container">
    <CellTitle title="数据关联视图" />
    <div  class="data-view-content">
      <div class="data-view-select">
        <a-select :style="{width:'328px'}" placeholder="环境监测数据">
          <a-option>环境监测数据</a-option>
          <a-option>科学研究数据资产</a-option>
        </a-select>
      </div>
      <BloodTiesChart width="100%" height="100%" :data="bloodTiesData" />
    </div>
  </div>
</template>

<script setup lang="ts">
import BloodTiesChart from '@/views/resource_ledger/BloodTiesChart/index.vue';
import CellTitle from '@/views/resource_ledger/components/CellTitle.vue';
import { onMounted, ref } from 'vue';
const testarr = [
  {
    id: '3',
    name: '环境监测资源(V1)',
    version: 1,
    type: '根资源',
    parent_id: ['4'],
    currently: false
  },
  { id: '4', name: '数据采集资源(V1)', version: 1, type: '根资源', parent_id: [], currently: true }
];
const bloodTiesData = ref<any>([]);
onMounted(() => {
  if (testarr?.filter((v: any) => !v.currently).length > 0) {
    bloodTiesData.value = testarr;
  }
});

const list = ref([
  {
    name: '资源名称：',
    value: '销售订单数据'
  },
  {
    name: '资源所属主体：',
    value: '上海鸿运龙兴科技有限公司'
  },
  {
    name: '资源编号：',
    value: 'SOO10'
  }
]);
</script>
<style lang="less" scoped>
.data-view-container {
  // padding: 0 24px;
}
.data-view-content{
  width: 100%;
  height: 424px;
  border: 1px solid #EBF0FA;
  overflow: hidden;
  padding-top: 20px;
}

.data-view-select{
  display: flex;
  justify-content: flex-end;
}
</style>
